<template>
  <el-submenu :index="generatorPath(item.path)" :popper-append-to-body="false">
    <template slot="title">
      <ly-svg-icon
        :icon-class="
          item.meta ? item.meta.icon || 'el-icon-menu' : 'el-icon-menu'
        "
      />
      <span class="title">{{ item.meta ? item.meta.title : item.name }}</span>

      <ly-menu-item-tip
        :value="item.meta ? item.meta.badge || '' : ''"
        :is-dot="item.meta ? item.meta.badge === 'dot' : false"
      />
    </template>
    <slot></slot>
  </el-submenu>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import * as path from "path";
import { isExternal } from "@/utils/utils.js";
@Component({
  name: "LySubMenuItem",
  components: {},
})
export default class LySubMenuItem extends Vue {
  //#region vue prop =================================
  @Prop({
    required: true,
    type: String,
    default: "",
  })
  fullPath: string;
  @Prop({
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  })
  item: any;

  //#endregion

  //#region vue data =================================

  //#endregion
  //#region computed getter =================================

  //#endregion
  //#region vue life =================================
  created() {
    console.log("LySubMenuItem " + "created");
  }

  mounted() {
    console.log("LySubMenuItem " + "mounted");
  }

  beforeDestroy() {
    console.log("LySubMenuItem " + "beforeDestroy");
  }

  //#endregion
  //#region comp getter =================================

  //#endregion
  //#region server data =================================

  //#endregion
  //#region components Func =================================
  private generatorPath(childPath: string) {
    if (isExternal(this.fullPath)) {
      return this.fullPath;
    }
    if (isExternal(childPath)) {
      return childPath;
    }
    return path.resolve(this.fullPath, this.item.path);
  }
  //#endregion
  //#region Public Func =================================

  //#endregion
  //#region view layout =================================

  //#endregion
}
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
.title {
  margin-left: 10px;
  color: currentColor;
  font-size: 14px;
}
::v-deep .el-submenu [class^="el-icon-"] {
  margin-right: 0;
  width: 1em;
  height: 1em;
  font-size: 14px;
}
</style>
